--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
Commit 5e66dc05e21c878415fba4d6bded685b32624567
Parents : 0376cfc
Author : Ivan <ivan@quad4.io>
Signature : Signature validation error
Date : 2026-04-12T17:40:44-05:00
refactor(aboutPage): improve layout and styling for better responsiveness and visual consistency
Changes
1 files changed, 46 insertions(+), 26 deletions(-)
Diff
diff --git a/meshchatx/src/frontend/components/about/AboutPage.vue b/meshchatx/src/frontend/components/about/AboutPage.vue
index f022e4a8..4312c55a 100644
--- a/meshchatx/src/frontend/components/about/AboutPage.vue
+++ b/meshchatx/src/frontend/components/about/AboutPage.vue
@@ -2,10 +2,9 @@
<div
class="flex flex-col flex-1 overflow-hidden min-w-0 bg-gradient-to-br from-slate-50 via-slate-100 to-white dark:from-zinc-950 dark:via-zinc-900 dark:to-zinc-900"
>
- <div class="flex-1 overflow-y-auto w-full px-4 md:px-8 py-6 text-gray-900 dark:text-zinc-100">
- <div class="space-y-6 w-full max-w-4xl mx-auto pb-20">
- <!-- Basic Info Card -->
- <div v-if="appInfo" class="glass-card !p-8">
+ <div class="flex-1 overflow-y-auto w-full px-3 sm:px-5 md:px-8 py-4 sm:py-6 text-gray-900 dark:text-zinc-100">
+ <div class="space-y-0 w-full max-w-4xl mx-auto pb-16 sm:pb-24">
+ <div v-if="appInfo" class="about-section">
<div class="flex flex-col gap-8 md:flex-row md:items-center">
<!-- Logo & Title -->
<div class="flex items-center gap-6">
@@ -26,20 +25,39 @@
</div>
</div>
- <div class="flex-1 md:text-right flex flex-wrap justify-start md:justify-end gap-3">
- <button type="button" class="secondary-chip" @click="showTutorial">
+ <div
+ class="flex-1 flex flex-wrap justify-stretch sm:justify-end gap-2 sm:gap-3 w-full md:w-auto"
+ >
+ <button
+ type="button"
+ class="secondary-chip flex-1 min-[480px]:flex-none min-h-[44px] sm:min-h-0 justify-center"
+ @click="showTutorial"
+ >
<v-icon icon="mdi-help-circle" size="20" class="mr-2"></v-icon>
{{ $t("app.tutorial_title") }}
</button>
- <button type="button" class="secondary-chip" @click="showChangelog">
+ <button
+ type="button"
+ class="secondary-chip flex-1 min-[480px]:flex-none min-h-[44px] sm:min-h-0 justify-center"
+ @click="showChangelog"
+ >
<v-icon icon="mdi-history" size="20" class="mr-2"></v-icon>
{{ $t("app.changelog_title") }}
</button>
- <button v-if="isElectron" type="button" class="primary-chip" @click="relaunch">
+ <button
+ v-if="isElectron"
+ type="button"
+ class="primary-chip flex-1 min-[480px]:flex-none min-h-[44px] sm:min-h-0 justify-center"
+ @click="relaunch"
+ >
<v-icon icon="mdi-restart" size="20" class="mr-2"></v-icon>
{{ $t("common.restart_app") }}
</button>
- <button type="button" class="danger-chip" @click="shutdown">
+ <button
+ type="button"
+ class="danger-chip flex-1 min-[480px]:flex-none min-h-[44px] sm:min-h-0 justify-center"
+ @click="shutdown"
+ >
<v-icon icon="mdi-power" size="20" class="mr-2"></v-icon>
{{ $t("common.shutdown", "Shutdown") }}
</button>
@@ -57,8 +75,7 @@
>.
</div>
- <!-- Contact Developer Card -->
- <div class="glass-card !p-5 space-y-3">
+ <div class="mt-6 pt-6 border-t border-gray-200/70 dark:border-zinc-800/80 space-y-3">
<div class="flex items-center justify-between">
<div
class="text-xs font-black uppercase tracking-widest text-gray-500 dark:text-zinc-500"
@@ -154,7 +171,7 @@
<div class="space-y-6">
<!-- Security & Integrity -->
- <div v-if="appInfo" class="glass-card !p-6">
+ <div v-if="appInfo" class="about-section">
<div class="flex flex-col gap-4 md:flex-row md:items-center md:justify-between mb-6">
<div
class="text-xs font-black text-blue-500 uppercase tracking-[0.2em] flex items-center gap-2"
@@ -230,7 +247,7 @@
</div>
<!-- Advanced Tech Info -->
- <div v-if="appInfo" class="glass-card !p-6">
+ <div v-if="appInfo" class="about-section">
<div
class="text-xs font-black text-blue-500 uppercase tracking-[0.2em] mb-6 flex items-center gap-2"
>
@@ -271,7 +288,7 @@
</button>
</div>
<div
- class="flex flex-col justify-center space-y-3 bg-zinc-50 dark:bg-zinc-950 p-4 rounded-xl border border-zinc-100 dark:border-zinc-800"
+ class="flex flex-col justify-center space-y-3 py-2 sm:py-3 border-t sm:border border-gray-200/60 dark:border-zinc-800/80 sm:rounded-xl sm:p-4 sm:bg-black/[0.02] dark:sm:bg-white/[0.02]"
>
<div
v-if="config"
@@ -317,7 +334,7 @@
</div>
<!-- Dependency Chain -->
- <div v-if="appInfo" class="glass-card !p-6">
+ <div v-if="appInfo" class="about-section">
<div
class="text-xs font-black text-blue-500 uppercase tracking-[0.2em] mb-8 flex items-center gap-2"
>
@@ -422,7 +439,7 @@
<div class="space-y-8">
<div
- class="bg-zinc-50 dark:bg-zinc-950 p-5 rounded-2xl border border-zinc-100 dark:border-zinc-800"
+ class="py-4 sm:p-5 border-t border-gray-200/60 dark:border-zinc-800/80 sm:border sm:rounded-2xl sm:bg-black/[0.02] dark:sm:bg-white/[0.02]"
>
<div
class="text-[10px] font-black text-gray-400 dark:text-zinc-600 uppercase tracking-[0.2em] mb-4"
@@ -497,7 +514,7 @@
</div>
<!-- Database Health -->
- <div class="glass-card !p-6">
+ <div class="about-section">
<div class="flex flex-col gap-4 md:flex-row md:items-center md:justify-between mb-8">
<div
class="text-xs font-black text-blue-500 uppercase tracking-[0.2em] flex items-center gap-2"
@@ -505,10 +522,10 @@
<v-icon icon="mdi-database-cog" size="14"></v-icon>
Database Health & Maintenance
</div>
- <div class="flex flex-wrap gap-2">
+ <div class="flex flex-wrap gap-2 w-full md:w-auto">
<button
type="button"
- class="secondary-chip !px-4 !py-1.5 !text-xs"
+ class="secondary-chip !px-4 !py-1.5 !text-xs min-h-[44px] sm:min-h-0"
:disabled="databaseActionInProgress || healthLoading"
@click="getDatabaseHealth(true)"
>
@@ -535,9 +552,9 @@
</div>
</div>
- <div v-if="databaseHealth" class="grid grid-cols-2 md:grid-cols-4 gap-8 mb-8">
+ <div v-if="databaseHealth" class="grid grid-cols-2 md:grid-cols-4 gap-3 sm:gap-6 md:gap-8 mb-8">
<div
- class="bg-zinc-50 dark:bg-zinc-950 p-4 rounded-2xl border border-zinc-100 dark:border-zinc-800 shadow-inner"
+ class="py-3 px-2 sm:p-4 border-b border-gray-200/60 dark:border-zinc-800/60 md:border md:rounded-xl"
>
<div
class="text-[9px] font-black text-gray-400 dark:text-zinc-600 uppercase tracking-[0.2em] mb-2 leading-none"
@@ -552,7 +569,7 @@
</div>
</div>
<div
- class="bg-zinc-50 dark:bg-zinc-950 p-4 rounded-2xl border border-zinc-100 dark:border-zinc-800 shadow-inner"
+ class="py-3 px-2 sm:p-4 border-b border-gray-200/60 dark:border-zinc-800/60 md:border md:rounded-xl"
>
<div
class="text-[9px] font-black text-gray-400 dark:text-zinc-600 uppercase tracking-[0.2em] mb-2 leading-none"
@@ -564,7 +581,7 @@
</div>
</div>
<div
- class="bg-zinc-50 dark:bg-zinc-950 p-4 rounded-2xl border border-zinc-100 dark:border-zinc-800 shadow-inner"
+ class="py-3 px-2 sm:p-4 border-b border-gray-200/60 dark:border-zinc-800/60 md:border md:rounded-xl"
>
<div
class="text-[9px] font-black text-gray-400 dark:text-zinc-600 uppercase tracking-[0.2em] mb-2 leading-none"
@@ -576,7 +593,7 @@
</div>
</div>
<div
- class="bg-zinc-50 dark:bg-zinc-950 p-4 rounded-2xl border border-zinc-100 dark:border-zinc-800 shadow-inner"
+ class="py-3 px-2 sm:p-4 border-b border-gray-200/60 dark:border-zinc-800/60 md:border md:rounded-xl"
>
<div
class="text-[9px] font-black text-gray-400 dark:text-zinc-600 uppercase tracking-[0.2em] mb-2 leading-none"
@@ -653,7 +670,7 @@
<div
v-for="snapshot in snapshots"
:key="snapshot.path"
- class="flex items-center justify-between p-4 rounded-2xl bg-zinc-50 dark:bg-zinc-900 border border-zinc-100 dark:border-zinc-800 hover:border-purple-500/20 transition-all group"
+ class="flex items-center justify-between gap-2 py-3 sm:p-4 border-b border-gray-200/60 dark:border-zinc-800/80 last:border-0 sm:border sm:rounded-lg sm:bg-black/[0.02] dark:sm:bg-white/[0.02] transition-colors"
>
<div class="flex flex-col min-w-0">
<span
@@ -744,7 +761,7 @@
<div
v-for="backup in autoBackups"
:key="backup.path"
- class="flex items-center justify-between p-4 rounded-2xl bg-zinc-50 dark:bg-zinc-900 border border-zinc-100 dark:border-zinc-800 hover:border-blue-500/20 transition-all group"
+ class="flex items-center justify-between gap-2 py-3 sm:p-4 border-b border-gray-200/60 dark:border-zinc-800/80 last:border-0 sm:border sm:rounded-lg sm:bg-black/[0.02] dark:sm:bg-white/[0.02] transition-colors"
>
<div class="flex flex-col min-w-0">
<span
@@ -1282,6 +1299,9 @@ export default {
</script>
<style scoped>
+.about-section {
+ @apply w-full border-b border-gray-200/60 dark:border-zinc-800/60 py-6 sm:py-8 last:border-0;
+}
:deep(.about-btn:focus-visible) {
outline: 2px solid rgba(59, 130, 246, 0.35);
outline-offset: 2px;
──────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────